<template>
  <el-dialog
    top="30px"
    width="800px"
    class="dialog-sm"
    append-to-body
    title="退费审批"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="font-weight-bold">基本信息</div>
    <div class="border rounded p-1 bg-light">
      <table class="table table-sm table-borderless">
        <tbody>
          <tr>
            <td width="15%">退费主体：</td>
            <td width="35%">{{ editRow.customer_name || '-' }}</td>
            <td width="15%">地址：</td>
            <td width="35%">{{ editRow.address || '-' }}</td>
          </tr>
          <tr>
            <td>项目负责人：</td>
            <td>{{ editRow.corp_name || '-' }}</td>
            <td>联系电话：</td>
            <td>{{ editRow.mobile_no || '-' }}</td>
          </tr>
          <tr>
            <td>在保余额：</td>
            <td>{{ editRow.left_funds || '-' }}万元</td>
            <td>担保费率：</td>
            <td>{{ editRow.gua_rate || '-' }}%</td>
          </tr>
          <tr>
            <td>缴费金额：</td>
            <td>{{ editRow.actual_warrant_fee || '-' }}元</td>
            <td>缴费时间：</td>
            <td>{{ actualWarrantDate || '-' }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-3 font-weight-bold">审批信息</div>
    <div class="border rounded p-1 bg-light">
      <table class="table table-sm table-borderless">
        <tbody>
          <tr>
            <td width="15%">退费金额：</td>
            <td width="35%">{{ editRow.refund_funds || '-' }}元</td>
            <td width="15%">退费申请时间：</td>
            <td width="35%">{{ applyRefundTime || '-' }}</td>
          </tr>
          <tr>
            <td>退费原因：</td>
            <td colspan="3">{{ editRow.refund_reason || '-' }}</td>
          </tr>
          <tr>
            <td>退费附件：</td>
            <td colspan="3">
              <img-card :images="attachImages"></img-card>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="mt-3 text-center">
      <el-button type="primary" @click="handleConfirm" :loading="saveLoading" class="btn-long">
        完成退费
      </el-button>
      <el-button @click="handleDismiss" :loading="saveLoading" class="btn-long">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { arrayFromString } from '@vimi/utils-tool'

import ImgCard from '@/components/ImgCard'

export default {
  components: {
    ImgCard,
  },
  props: {
    visible: Boolean,
    editRow: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      saveLoading: false,
    }
  },
  computed: {
    attachImages() {
      return arrayFromString(this.editRow.apply_refund_attachment)
    },
    actualWarrantDate() {
      return this.$utils.dateFormat(this.editRow.actual_warrant_date, 'yyyy年MM月dd日')
    },
    applyRefundTime() {
      return this.$utils.dateFormat(this.editRow.apply_refund_time, 'yyyy年MM月dd日')
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleDismiss() {
      this.beforeClose()
    },
    handleConfirm() {
      this.$confirm('确认完成退费?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          this.applyRefund()
        })
        .catch(() => {})
    },
    async applyRefund() {
      this.saveLoading = true
      const [res] = await this.$utils.promise(
        this.$api.updateData(this.$serviceName, 'credit_warrant_fee_record', this.editRow.id, {
          refund_status: 1,
          refund_time: this.$utils.dateFormat(new Date()),
        })
      )
      this.saveLoading = false

      if (!res) {
        return this.$message.error(`审批失败，请重试`)
      }

      this.$message.success(`审批成功`)
      this.$emit('success')
      this.beforeClose()
    },
  },
}
</script>

<style lang="scss" scoped></style>
